import React from "react";
import { Typography, Space, Button } from "antd";
import {
  GithubOutlined,
  LinkedinOutlined,
  MailOutlined,
} from "@ant-design/icons";
import "./Home.css";

const { Title, Paragraph } = Typography;

const Home: React.FC = () => {
  return (
    <Space direction="vertical" size="large" style={{ width: "100%" }}>
      <div className="home-content">
        <Title level={1} className="gradient-text">
          Hello, I'm <span className="highlight">Your Name</span>
        </Title>
        <Title level={3} className="subtitle">
          Frontend Developer & UI/UX Enthusiast
        </Title>
        <Paragraph className="description">
          专注于创建美观、实用、高性能的 Web 应用
          <br />
          擅长 React、TypeScript 和现代前端技术栈
        </Paragraph>
        <Space size="middle" className="social-links">
          <Button type="primary" icon={<GithubOutlined />} size="large">
            GitHub
          </Button>
          <Button type="primary" icon={<LinkedinOutlined />} size="large">
            LinkedIn
          </Button>
          <Button type="primary" icon={<MailOutlined />} size="large">
            Contact
          </Button>
        </Space>
      </div>
    </Space>
  );
};

export default Home;
